<template>
  <div class="contain">
    <div class="appcard">
      <el-tabs tab-position="left" class="demo-tabs">
        <el-tab-pane label="平台介绍">
          <div class="header">
            <h2>
              产品
              <span>介绍</span>
            </h2>
          </div>
          <div class="con">
            <p>”学車啦“系统(SAAS)平台主要从驾校管理和经营方面的需求切入，提供招生营销、教练管理、考试管理、学员管理、内部运营管控工具等多维度的服务内容。面向驾校实现内部信息化管理，让驾校管理者和工作人员更高效、更快捷的完成枯燥无味的工作，让工作更有条理。改变驾校传统的文档管理的工作方式，实现信息化、网络化、安全的统一管理，大大降低了驾校运营的成本，提高运营的效率。
              ”学車啦“系统平台扎根国内驾培市场，通过搭建线上平台服务与线下驾校服务相贯通的模式，致力于提供囊括驾考培方方面面的服务，该系统去繁就简实现了在移动端（小程序）、网页端（H5）并行方式，避免使用者软件的安装。
              ”学車啦“系统平台，围绕驾校需求，通过在功能、技术等层面展开优化和创新，坚持“技术创新、服务创新、客户第一”的发展路线，继续加大研发与创新投入，为用户提供一站式互联网驾校管理方案和定制服务，打造数字经济新生态，聚力新动能、开创云未来，助力驾校实现互联网+，同时让学员获得与众不同的学车体验！</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="入住指南">
          <div class="header">
            <h2>
              教练入住
              <span>指南</span>
            </h2>
          </div>
            <el-timeline style="margin: 10px 10% 0 10%">
              <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :hollow="activity.hollow"
              >
                <el-card :body-style=activity.color>
                  <div class="titt">
                    <h4>{{ activity.h }}</h4>
                    <small>{{activity.s}}</small>
                  </div>
                  <el-divider />
                  <p style="line-height: 35px;" v-if="index===1">{{activity.p}}<br>{{activity.p1}}<br>{{activity.p2}}<br>{{activity.p3}}</p>
                  <p style="line-height: 35px;" v-else>{{activity.p}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="教练申请">
          <div class="header">
            <h2>
              教练入住
              <span>申请</span>
            </h2>
          </div>
          <div class="apply">
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了方便我们快速了解申请者的基本信息，我们采用了线上投递申请的方式，<span style="color: blue">“XXXXXXXXXXX”</span>是我们相关人员的联系方式，如果您在填写申请时遇到什么问题，可以向我们咨询。
              <br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请您认真填写申请信息，信息将于提交后发送给我们的管理员，在我们确认您能通过时，我们会让负责人第一时间联系您，请耐心等待！
            </p>
            <el-form ref="Inform" :inline="true" :model="applyForm" :rules="rules" class="demo-form-inline">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="id">
                    <el-input v-model="applyForm.id" maxlength="10" show-word-limit placeholder="您的申请账号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="password">
                    <el-input v-model="applyForm.password" maxlength="10" type="password" show-password placeholder="账号密码"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="" prop="name">
                        <el-input v-model="applyForm.name" maxlength="100" placeholder="真实姓名"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="" prop="age">
                        <el-input v-model.number="applyForm.age" maxlength="3" placeholder="年龄"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="mobile">
                    <el-input v-model="applyForm.mobile" placeholder="手机号"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="sex">
                    <el-radio-group v-model="applyForm.sex">
                      <el-radio label="男" border>男</el-radio>
                      <el-radio label="女" border>女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="" prop="date">
                    <el-input v-model="applyForm.date" disabled placeholder="申请日期"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="" prop="introduction">
                    <el-input
                        v-model="applyForm.introduction"
                        type="textarea"
                        placeholder="个人简介"
                        maxlength="100"
                        show-word-limit
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="" prop="status" style="display: none">
                <el-input v-model="applyForm.status" disabled placeholder="状态"/>
              </el-form-item>
            </el-form>
            <div class="butt">
              <button class="btn" @click="onSubmit"> 提交</button>
              <button class="btn" @click="resetFrom"> 重置</button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {InsertTeacher} from "@/api/teacher";
import {ElMessage} from "element-plus";

// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}
//初始化表单
const applyForm = ref({})
applyForm.value.date=UpData()
applyForm.value.status='0'
const Inform=ref(null)
//校验规则
const rules =ref({
  id:[
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password:[
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  name:[
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  sex:[
    { required: true, message: '请输入性别', trigger: 'blur' }
  ],
  mobile:[{ required: true, message: '手机号不能为空' },
    { type: 'number',
      message: '手机号格式不正确',
      trigger: 'blur',
      transform(value) {
        var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
        if (!phonereg.test(value)) {
          return false
        } else {
          return Number(value)
        }
      }
    }],
  age:[
    { required: true, message: '请输入年龄' },
    { type: 'number', message: '年龄必须为数字' },
  ],
  date:[
    { required: true, message: '请输入入学日期', trigger: 'blur' }
  ]
})
//表单重置
const resetFrom = () =>{
  Inform.value.resetFields()
}
//提交申请
const onSubmit = () => {
  // console.log(0+applyForm.value.id)
  Inform.value.validate(async (valid)=>{
    if (valid){
      await InsertTeacher({
        id:('0-'+applyForm.value.id),
        password:applyForm.value.password,
        name:applyForm.value.name,
        age:applyForm.value.age,
        mobile:applyForm.value.mobile,
        sex:applyForm.value.sex,
        date:applyForm.value.date,
        introduction:applyForm.value.introduction,
        status:0
      }).then(res=>{
        console.log(res)
        if(res.code===20011){
          ElMessage({
            message: '提交成功，请耐心等待通知',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '提交失败，教练账号已存在',
            type: 'error',
          })
        }
        resetFrom()
      })
    }else {
      console.log('error submit!')
    }
  })
}

const activities = [
  {
    content: 'Custom hollow',
    type: 'primary',
    hollow: true,
    size:'large',
    color:'background-color: rgba(90,141,238,.1)',
    h:'了解系统基本功能',
    s:'了解',
    p:'在您打算入住或使用平台，请先了解平台功能是否适用贵校！ 如未了解详细功能，请点击左侧功能明细进行查阅。'
  },
  {
    content: 'Custom hollow',
    type: 'primary',
    hollow: true,
    color: 'background-color: rgba(57,218,138,.1)',
    h:'准备入住资料及须知',
    s:'准备',
    p:'1、确认自己是否想要且有能力胜任这份工作。',
    p1:'2、需准备个人简历、个人信息、联系人、联系人手机号。',
    p2:'3、请准备好身份证原件，最后开通是会合实身份证，注意请不要把身份证发给我们。',
    p3:'4、如入驻资料缺少或有误，会退回给您重新提交，建议您事先根据要求准备齐全，一次性通过审核。'
  },
  {
    content: 'Custom hollow',
    type: 'primary',
    hollow: true,
    color: 'background-color: rgba(255,91,92,.1)',
    h:'提交入驻申请',
    s:'申请',
    p:'请把准备好的资料：联系人、联系人手机号、等在平台的“教练入住”处填写提交。 提交申请后，请耐心等待我们联系您。'
  },
  {
    content: 'Custom hollow',
    type: 'primary',
    hollow: true,
    color: 'background-color: rgba(0,207,221,.1)',
    h:'资质审核',
    s:'审核',
    p:'在我们收到您的申请信息后，会在三个工作日内联系您，核对您的信息。请确保电话畅通，如三个工作日内未接到电话审核，请先查收您提供的电话是否存在短信通知。'
  },
  {
    content: 'Custom hollow',
    type: 'primary',
    hollow: true,
    color: 'background-color: rgba(73,85,99,.1)',
    h:'账号开通',
    s:'完成',
    p:'在入住申请审核通过后，三个工作日内，会第一时间以电话或短信形式告知，账号开通情况及账号相关信息，请留意电话及短信。'
  },
]

</script>

<style scoped>
.contain{
  flex: 1;
  width: 100%;
  overflow: auto;
  background-color: white;
}
.appcard{
  min-height: 100%;
  margin: 2px 10% 2px 10%;
  border: 1px solid #dcdcdc;
  border-radius: 1%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: #c9c9c9 0 0 10px 2px ;
}
:deep(.demo-tabs){
  padding: 10px;
  width: auto;
  min-height: 100%;
}
:deep(.el-tabs__header.is-left){
  height: 1000px;
  /*border: 10px solid red;*/
}
.header{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 40px 0;
}
.header h2{
  font-size: 36px;
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 30px;
  font-style: italic;
}
.header span{
  background: url("~@/assets/00.png") repeat-y;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat-y;
  background-size: auto;
  padding: 0 10px;
  background-position: center 75%;
  background-repeat: no-repeat;
  background-size: contain;
}
.con{
  margin: 0 50px;
  padding: 0 20px 0 20px;
  line-height: 35px;
}
.titt{
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
:deep(.el-divider--horizontal){
  margin: 0;
}
.apply{
  width: 100%;
  padding: 0 50px 0 50px;
  /*border: 1px solid red;*/
  box-sizing: border-box;
}
.apply p{
  color: #707070;
  margin-bottom: 25px;
  line-height: 35px;
  font-size: 16px;
  font-family: 'Microsoft YaHei','Hiragino Sans GB',Helvetica,Arial,'Lucida Grande',sans-serif;
  font-weight: 400;
  /*border: 1px solid blue;*/
}
:deep(.el-form){
}
:deep(.el-form-item){
  display: block;
  width: 100%;
}
:deep(.el-input__wrapper){
  height: 45px;
  min-width: 20%;
  font-size: 17px !important;
  background-color: #f9fbfc;
}
:deep(.el-input__inner::placeholder){
  color: #1f2d3d;
}
:deep(.is-focus){
  background-color: rgba(255, 255, 255, 0.99);
}
.butt{
  display: flex;
  justify-content: center;
  /*border: 1px solid blue;*/
  box-sizing: border-box;
  padding: 10px;

}


/* From uiverse.io by @CristianMontoya98 */
.btn {
  width: 6.5em;
  height: 2.3em;
  margin: 0.5em;
  background: #fdd463;
  color: #100505;
  border: none;
  border-radius: 0.225em;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: black;
}

button:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
</style>